<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧农业灌溉系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        info: '#86909C',
                        light: '#F2F3F5',
                        dark: '#1D2129',
                        farm1: '#36B37E', // 小麦田
                        farm2: '#F5A623', // 水稻田
                        farm3: '#FF5630', // 玉米田
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 20px rgba(0, 0, 0, 0.08)',
                        'card-hover': '0 8px 30px rgba(0, 0, 0, 0.12)',
                    }
                },
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-transition {
                transition: all 0.3s ease;
            }
            .gradient-bg {
                background: linear-gradient(135deg, #165DFF 0%, #0FC6C2 100%);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300" id="main-header">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <i class="fa fa-leaf text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-primary">智慧农业灌溉系统</h1>
            </div>
            
            <nav class="hidden md:flex items-center space-x-6">
                <a href="#dashboard" class="font-medium text-primary border-b-2 border-primary py-1">仪表盘</a>
                <a href="#sensors" class="font-medium text-gray-600 hover:text-primary transition-colors py-1">传感器数据</a>
                <a href="#irrigation" class="font-medium text-gray-600 hover:text-primary transition-colors py-1">灌溉控制</a>
                <a href="#prediction" class="font-medium text-gray-600 hover:text-primary transition-colors py-1">预测分析</a>
                <a href="#history" class="font-medium text-gray-600 hover:text-primary transition-colors py-1">历史记录</a>
            </nav>
            
            <div class="flex items-center space-x-4">
                <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 transition-colors">
                    <i class="fa fa-moon-o text-gray-600"></i>
                </button>
                <div class="relative">
                    <button id="user-menu-button" class="flex items-center space-x-2 p-1 rounded-full hover:bg-gray-100 transition-colors">
                        <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
                        <span class="hidden md:inline font-medium">管理员</span>
                        <i class="fa fa-angle-down text-gray-600"></i>
                    </button>
                    <div id="user-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50">
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人资料</a>
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">系统设置</a>
                        <div class="border-t border-gray-100 my-1"></div>
                        <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">退出登录</a>
                    </div>
                </div>
                <button id="mobile-menu-button" class="md:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors">
                    <i class="fa fa-bars text-gray-600"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="md:hidden hidden bg-white border-t">
            <div class="container mx-auto px-4 py-3 space-y-3">
                <a href="#dashboard" class="block py-2 font-medium text-primary">仪表盘</a>
                <a href="#sensors" class="block py-2 font-medium text-gray-600">传感器数据</a>
                <a href="#irrigation" class="block py-2 font-medium text-gray-600">灌溉控制</a>
                <a href="#prediction" class="block py-2 font-medium text-gray-600">预测分析</a>
                <a href="#history" class="block py-2 font-medium text-gray-600">历史记录</a>
            </div>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="flex-grow container mx-auto px-4 py-6">
        <!-- 欢迎信息和天气 -->
        <section id="dashboard" class="mb-8">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div class="lg:col-span-2 gradient-bg rounded-xl p-6 shadow-lg text-white">
                    <div class="flex flex-col md:flex-row md:items-center justify-between">
                        <div>
                            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-shadow mb-2">欢迎回来，管理员</h2>
                            <p class="text-white/80 mb-4">今天是 <span id="current-date">2025年6月30日</span>，星期 <span id="current-day">一</span></p>
                            <div class="flex flex-wrap gap-4">
                                <div class="flex items-center bg-white/20 rounded-lg px-4 py-2 backdrop-blur-sm">
                                    <i class="fa fa-tint text-lg mr-2"></i>
                                    <span>蓄水池水位: <span id="water-level">85.5</span>%</span>
                                </div>
                                <div class="flex items-center bg-white/20 rounded-lg px-4 py-2 backdrop-blur-sm">
                                    <i class="fa fa-thermometer-half text-lg mr-2"></i>
                                    <span>土壤温度: <span id="soil-temp">25.5</span>°C</span>
                                </div>
                                <div class="flex items-center bg-white/20 rounded-lg px-4 py-2 backdrop-blur-sm">
                                    <i class="fa fa-tint text-lg mr-2"></i>
                                    <span>土壤湿度: <span id="soil-moisture">60.2</span>%</span>
                                </div>
                            </div>
                        </div>
                        <div class="mt-4 md:mt-0">
                            <div class="bg-white/20 rounded-xl p-4 backdrop-blur-sm">
                                <div class="flex items-center justify-between mb-2">
                                    <h3 class="font-medium">当前天气</h3>
                                    <i class="fa fa-sun-o text-xl"></i>
                                </div>
                                <div class="text-2xl font-bold mb-1">28°C</div>
                                <div class="text-sm text-white/80">晴天 · 微风</div>
                                <div class="mt-3 grid grid-cols-3 gap-2 text-center text-sm">
                                    <div class="bg-white/10 rounded-lg p-2">
                                        <i class="fa fa-tint mr-1"></i> 30%
                                    </div>
                                    <div class="bg-white/10 rounded-lg p-2">
                                        <i class="fa fa-location-arrow mr-1"></i> 2.5m/s
                                    </div>
                                    <div class="bg-white/10 rounded-lg p-2">
                                        <i class="fa fa-cloud mr-1"></i> 10%
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl p-6 shadow-card card-transition hover:shadow-card-hover">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-bold text-lg">系统状态</h3>
                        <span class="bg-success/10 text-success text-xs px-2 py-1 rounded-full">正常运行</span>
                    </div>
                    
                    <div class="space-y-4">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <i class="fa fa-sitemap text-primary mr-3"></i>
                                <span>传感器连接</span>
                            </div>
                            <span class="bg-success/10 text-success text-xs px-2 py-1 rounded-full">全部在线</span>
                        </div>
                        
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <i class="fa fa-tint text-primary mr-3"></i>
                                <span>灌溉系统</span>
                            </div>
                            <span class="bg-success/10 text-success text-xs px-2 py-1 rounded-full">就绪</span>
                        </div>
                        
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <i class="fa fa-cloud text-primary mr-3"></i>
                                <span>天气数据</span>
                            </div>
                            <span class="bg-success/10 text-success text-xs px-2 py-1 rounded-full">已更新</span>
                        </div>
                        
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <i class="fa fa-microchip text-primary mr-3"></i>
                                <span>AI预测模型</span>
                            </div>
                            <span class="bg-success/10 text-success text-xs px-2 py-1 rounded-full">运行中</span>
                        </div>
                    </div>
                    
                    <div class="mt-5 pt-4 border-t border-gray-100">
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-500">上次系统检查</span>
                            <span class="text-sm font-medium">2025-06-29 23:59</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 传感器数据区域 -->
        <section id="sensors" class="mb-8">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-xl font-bold">传感器数据</h2>
                <div class="flex space-x-2">
                    <button id="refresh-sensor-data" class="bg-primary text-white px-4 py-2 rounded-lg flex items-center transition-all hover:bg-primary/90">
                        <i class="fa fa-refresh mr-2"></i>刷新数据
                    </button>
                    <div class="relative">
                        <select id="farmland-selector" class="appearance-none bg-white border border-gray-200 rounded-lg pl-4 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-primary/20">
                            <option value="1">小麦田</option>
                            <option value="2">水稻田</option>
                            <option value="3">玉米田</option>
                        </select>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500">
                            <i class="fa fa-chevron-down text-xs"></i>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- 蓄水池水位卡片 -->
                <div class="bg-white rounded-xl p-6 shadow-card card-transition hover:shadow-card-hover">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="text-gray-500 font-medium">蓄水池水位</h3>
                            <p class="text-2xl font-bold mt-1"><span id="water-level-display">85.5</span>%</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                            <i class="fa fa-tint text-primary"></i>
                        </div>
                    </div>
                    
                    <div class="relative h-2 bg-gray-100 rounded-full overflow-hidden mb-2">
                        <div id="water-level-bar" class="absolute left-0 top-0 h-full bg-primary rounded-full" style="width: 85.5%"></div>
                    </div>
                    
                    <div class="flex justify-between text-xs text-gray-500">
                        <span>0%</span>
                        <span>50%</span>
                        <span>100%</span>
                    </div>
                    
                    <div class="mt-4 text-sm">
                        <span id="water-level-status" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success/10 text-success">
                            <i class="fa fa-check-circle mr-1"></i>水位正常
                        </span>
                    </div>
                </div>
                
                <!-- 土壤湿度卡片 -->
                <div class="bg-white rounded-xl p-6 shadow-card card-transition hover:shadow-card-hover">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="text-gray-500 font-medium">土壤湿度</h3>
                            <p class="text-2xl font-bold mt-1"><span id="soil-moisture-display">60.2</span>%</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
                            <i class="fa fa-tint text-blue-500"></i>
                        </div>
                    </div>
                    
                    <div class="relative h-2 bg-gray-100 rounded-full overflow-hidden mb-2">
                        <div id="soil-moisture-bar" class="absolute left-0 top-0 h-full bg-blue-500 rounded-full" style="width: 60.2%"></div>
                    </div>
                    
                    <div class="flex justify-between text-xs text-gray-500">
                        <span>0%</span>
                        <span id="moisture-min">40</span>%
                        <span id="moisture-max">70</span>%
                        <span>100%</span>
                    </div>
                    
                    <div class="mt-4 text-sm">
                        <span id="soil-moisture-status" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success/10 text-success">
                            <i class="fa fa-check-circle mr-1"></i>湿度适宜
                        </span>
                    </div>
                </div>
                
                <!-- 土壤温度卡片 -->
                <div class="bg-white rounded-xl p-6 shadow-card card-transition hover:shadow-card-hover">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="text-gray-500 font-medium">土壤温度</h3>
                            <p class="text-2xl font-bold mt-1"><span id="soil-temp-display">25.5</span>°C</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center">
                            <i class="fa fa-thermometer-half text-orange-500"></i>
                        </div>
                    </div>
                    
                    <div class="relative h-2 bg-gray-100 rounded-full overflow-hidden mb-2">
                        <div id="soil-temp-bar" class="absolute left-0 top-0 h-full bg-orange-500 rounded-full" style="width: 65%"></div>
                    </div>
                    
                    <div class="flex justify-between text-xs text-gray-500">
                        <span>0°C</span>
                        <span>20°C</span>
                        <span>30°C</span>
                        <span>40°C</span>
                    </div>
                    
                    <div class="mt-4 text-sm">
                        <span id="soil-temp-status" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success/10 text-success">
                            <i class="fa fa-check-circle mr-1"></i>温度适宜
                        </span>
                    </div>
                </div>
                
                <!-- 水温卡片 -->
                <div class="bg-white rounded-xl p-6 shadow-card card-transition hover:shadow-card-hover">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="text-gray-500 font-medium">水温</h3>
                            <p class="text-2xl font-bold mt-1"><span id="water-temp-display">22.3</span>°C</p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
                            <i class="fa fa-thermometer-half text-blue-500"></i>
                        </div>
                    </div>
                    
                    <div class="relative h-2 bg-gray-100 rounded-full overflow-hidden mb-2">
                        <div id="water-temp-bar" class="absolute left-0 top-0 h-full bg-blue-500 rounded-full" style="width: 55%"></div>
                    </div>
                    
                    <div class="flex justify-between text-xs text-gray-500">
                        <span>0°C</span>
                        <span>15°C</span>
                        <span>25°C</span>
                        <span>35°C</span>
                    </div>
                    
                    <div class="mt-4 text-sm">
                        <span id="water-temp-status" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success/10 text-success">
                            <i class="fa fa-check-circle mr-1"></i>水温适宜
                        </span>
                    </div>
                </div>
            </div>
            
            <!-- 土壤肥力详情卡片 -->
            <div class="bg-white rounded-xl p-6 shadow-card mt-6">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-lg font-bold">土壤肥力详情</h3>
                    <span id="fertility-update-time" class="text-sm text-gray-500">更新于: 2025-06-29 10:00</span>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="text-sm text-gray-500 mb-2">酸碱度 (pH)</h4>
                        <div class="flex justify-between items-center">
                            <span class="text-xl font-bold"><span id="ph-value">6.8</span></span>
                            <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
                                <i class="fa fa-flask text-green-500"></i>
                            </div>
                        </div>
                        <div class="mt-3 text-xs">
                            <div class="flex justify-between mb-1">
                                <span>酸性</span>
                                <span>中性</span>
                                <span>碱性</span>
                            </div>
                            <div class="relative h-1 bg-gray-200 rounded-full overflow-hidden">
                                <div id="ph-indicator" class="absolute left-0 top-0 h-full bg-green-500 rounded-full" style="width: 68%"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="text-sm text-gray-500 mb-2">氮含量</h4>
                        <div class="flex justify-between items-center">
                            <span class="text-xl font-bold"><span id="nitrogen-value">18.5</span> mg/kg</span>
                            <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
                                <i class="fa fa-leaf text-blue-500"></i>
                            </div>
                        </div>
                        <div class="mt-3 text-xs">
                            <div class="flex justify-between mb-1">
                                <span>低</span>
                                <span>中</span>
                                <span>高</span>
                            </div>
                            <div class="relative h-1 bg-gray-200 rounded-full overflow-hidden">
                                <div id="nitrogen-indicator" class="absolute left-0 top-0 h-full bg-blue-500 rounded-full" style="width: 70%"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="text-sm text-gray-500 mb-2">磷含量</h4>
                        <div class="flex justify-between items-center">
                            <span class="text-xl font-bold"><span id="phosphorus-value">12.3</span> mg/kg</span>
                            <div class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center">
                                <i class="fa fa-apple text-orange-500"></i>
                            </div>
                        </div>
                        <div class="mt-3 text-xs">
                            <div class="flex justify-between mb-1">
                                <span>低</span>
                                <span>中</span>
                                <span>高</span>
                            </div>
                            <div class="relative h-1 bg-gray-200 rounded-full overflow-hidden">
                                <div id="phosphorus-indicator" class="absolute left-0 top-0 h-full bg-orange-500 rounded-full" style="width: 45%"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="text-sm text-gray-500 mb-2">钾含量</h4>
                        <div class="flex justify-between items-center">
                            <span class="text-xl font-bold"><span id="potassium-value">20.1</span> mg/kg</span>
                            <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
                                <i class="fa fa-tint text-purple-500"></i>
                            </div>
                        </div>
                        <div class="mt-3 text-xs">
                            <div class="flex justify-between mb-1">
                                <span>低</span>
                                <span>中</span>
                                <span>高</span>
                            </div>
                            <div class="relative h-1 bg-gray-200 rounded-full overflow-hidden">
                                <div id="potassium-indicator" class="absolute left-0 top-0 h-full bg-purple-500 rounded-full" style="width: 75%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mt-6 pt-4 border-t border-gray-100">
                    <h4 class="text-sm font-medium mb-3">肥力分析报告</h4>
                    <p class="text-sm text-gray-600" id="fertility-report">
                        土壤酸碱度呈弱酸性，适合大多数作物生长。氮含量充足，磷含量中等，钾含量较高。有机质含量适中，建议根据作物生长阶段适量补充磷肥。
                    </p>
                </div>
            </div>
        </section>
        
        <!-- 灌溉控制区域 -->
        <section id="irrigation" class="mb-8">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-xl font-bold">灌溉控制</h2>
                <div class="flex items-center space-x-2">
                    <div class="relative inline-block w-14 align-middle select-none">
                        <input type="checkbox" id="irrigation-mode-toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 border-gray-300 appearance-none cursor-pointer transition-transform duration-200 ease-in transform translate-x-0 checked:translate-x-8 checked:border-primary"/>
                        <label for="irrigation-mode-toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer checked:bg-primary"></label>
                    </div>
                    <span class="text-sm font-medium">智能模式</span>
                </div>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div class="bg-white rounded-xl p-6 shadow-card lg:col-span-2">
                    <h3 class="text-lg font-bold mb-4">灌溉状态</h3>
                    
                    <div class="flex flex-col md:flex-row gap-6">
                        <div class="flex-1">
                            <div class="flex items-center justify-between mb-3">
                                <h4 class="font-medium">当前灌溉计划</h4>
                                <span id="irrigation-status" class="px-2 py-1 text-xs rounded-full bg-success/10 text-success">未灌溉</span>
                            </div>
                            
                            <div class="bg-gray-50 rounded-lg p-4 mb-4">
                                <div class="flex items-center mb-3">
                                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                                        <i class="fa fa-calendar text-primary"></i>
                                    </div>
                                    <div>
                                        <div class="text-sm text-gray-500">下次灌溉时间</div>
                                        <div class="font-medium" id="next-irrigation-time">2025-06-30 16:00</div>
                                    </div>
                                </div>
                                
                                <div class="flex items-center">
                                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                                        <i class="fa fa-tint text-primary"></i>
                                    </div>
                                    <div>
                                        <div class="text-sm text-gray-500">预计灌溉量</div>
                                        <div class="font-medium" id="expected-irrigation-amount">20.0 mm</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <h4 class="font-medium mb-2">灌溉建议</h4>
                                <p class="text-sm text-gray-600" id="irrigation-suggestion">
                                    基于当前土壤湿度和天气预报，建议在今天下午4点进行灌溉，预计灌溉量20毫米。
                                </p>
                            </div>
                            
                            <div class="mt-4">
                                <h4 class="font-medium mb-2">智能决策因素</h4>
                                <div class="space-y-2">
                                    <div class="flex items-center">
                                        <div class="w-2 h-2 rounded-full bg-blue-500 mr-2"></div>
                                        <span class="text-sm">当前土壤湿度：60.2%</span>
                                    </div>
                                    <div class="flex items-center">
                                        <div class="w-2 h-2 rounded-full bg-orange-500 mr-2"></div>
                                        <span class="text-sm">未来24小时天气预报：晴朗</span>
                                    </div>
                                    <div class="flex items-center">
                                        <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div>
                                        <span class="text-sm">作物类型：小麦（需水量中等）</span>
                                    </div>
                                    <div class="flex items-center">
                                        <div class="w-2 h-2 rounded-full bg-purple-500 mr-2"></div>
                                        <span class="text-sm">历史灌溉模式分析</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="md:w-80 lg:w-96">
                            <div class="bg-gray-50 rounded-lg p-4 h-full">
                                <h4 class="font-medium mb-3 text-center">灌溉示意图</h4>
                                <div class="relative h-64">
                                    <svg viewBox="0 0 300 200" class="w-full h-full">
                                        <!-- 土地 -->
                                        <rect x="50" y="150" width="200" height="30" rx="5" fill="#8B4513" />
                                        
                                        <!-- 农作物 -->
                                        <g id="crops">
                                            <!-- 小麦 -->
                                            <path d="M70,150 Q90,120 110,150" fill="none" stroke="#DAA520" stroke-width="2" />
                                            <path d="M100,150 Q120,120 140,150" fill="none" stroke="#DAA520" stroke-width="2" />
                                            <path d="M130,150 Q150,120 170,150" fill="none" stroke="#DAA520" stroke-width="2" />
                                            <path d="M160,150 Q180,120 200,150" fill="none" stroke="#DAA520" stroke-width="2" />
                                            <path d="M190,150 Q210,120 230,150" fill="none" stroke="#DAA520" stroke-width="2" />
                                        </g>
                                        
                                        <!-- 灌溉喷头 -->
                                        <circle cx="150" cy="100" r="10" fill="#4A90E2" />
                                        
                                        <!-- 灌溉水 -->
                                        <g id="water-drops" class="opacity-0 transition-opacity duration-500">
                                            <circle cx="140" cy="110" r="2" fill="#4A90E2" />
                                            <circle cx="150" cy="115" r="2" fill="#4A90E2" />
                                            <circle cx="160" cy="112" r="2" fill="#4A90E2" />
                                            <circle cx="135" cy="120" r="2" fill="#4A90E2" />
                                            <circle cx="155" cy="125" r="2" fill="#4A90E2" />
                                            <circle cx="145" cy="130" r="2" fill="#4A90E2" />
                                            <circle cx="165" cy="128" r="2" fill="#4A90E2" />
                                        </g>
                                        
                                        <!-- 蓄水池 -->
                                        <rect x="230" y="100" width="40" height="50" rx="3" fill="#4A90E2" opacity="0.7" />
                                        <rect x="230" y="100" width="40" height="30" rx="3" fill="#4A90E2" />
                                        
                                        <!-- 管道 -->
                                        <line x1="150" y1="100" x2="180" y2="100" stroke="#4A90E2" stroke-width="5" />
                                        <line x1="180" y1="100" x2="180" y2="125" stroke="#4A90E2" stroke-width="5" />
                                        <line x1="180" y1="125" x2="230" y2="125" stroke="#4A90E2" stroke-width="5" />
                                    </svg>
                                </div>
                                
                                <div class="mt-4 text-center">
                                    <button id="start-irrigation" class="w-full bg-primary text-white py-2 rounded-lg hover:bg-primary/90 transition-colors">
                                        立即灌溉
                                    </button>
                                    <button id="stop-irrigation" class="w-full bg-gray-200 text-gray-700 py-2 rounded-lg mt-2 hover:bg-gray-300 transition-colors hidden">
                                        停止灌溉
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl p-6 shadow-card">
                    <h3 class="text-lg font-bold mb-4">手动控制</h3>
                    
                    <div class="bg-gray-50 rounded-lg p-4 mb-4">
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">选择农田</label>
                            <div class="relative">
                                <select id="manual-farmland" class="w-full appearance-none bg-white border border-gray-200 rounded-lg pl-4 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-primary/20">
                                    <option value="1">小麦田</option>
                                    <option value="2">水稻田</option>
                                    <option value="3">玉米田</option>
                                </select>
                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500">
                                    <i class="fa fa-chevron-down text-xs"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">灌溉水量 (mm)</label>
                            <input type="range" id="irrigation-amount" min="5" max="50" step="5" value="20" 
                                class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
                            <div class="flex justify-between text-xs text-gray-500 mt-1">
                                <span>5</span>
                                <span>25</span>
                                <span>50</span>
                            </div>
                            <div class="text-center mt-2">
                                <span id="irrigation-amount-value" class="font-medium">20</span> mm
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-1">灌溉方式</label>
                            <div class="grid grid-cols-2 gap-2">
                                <div class="relative">
                                    <input type="radio" id="irrigation-method-sprinkler" name="irrigation-method" value="sprinkler" checked 
                                        class="peer sr-only">
                                    <label for="irrigation-method-sprinkler" 
                                        class="block w-full py-2 px-3 bg-white border border-gray-200 rounded-lg cursor-pointer peer-checked:border-primary peer-checked:bg-primary/5 text-sm">
                                        <div class="flex items-center">
                                            <i class="fa fa-shower mr-2 text-gray-500 peer-checked:text-primary"></i>
                                            喷灌
                                        </div>
                                    </label>
                                </div>
                                <div class="relative">
                                    <input type="radio" id="irrigation-method-drip" name="irrigation-method" value="drip" 
                                        class="peer sr-only">
                                    <label for="irrigation-method-drip" 
                                        class="block w-full py-2 px-3 bg-white border border-gray-200 rounded-lg cursor-pointer peer-checked:border-primary peer-checked:bg-primary/5 text-sm">
                                        <div class="flex items-center">
                                            <i class="fa fa-tint mr-2 text-gray-500 peer-checked:text-primary"></i>
                                            滴灌
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                        
                        <button id="manual-irrigation-btn" class="w-full bg-primary text-white py-2 rounded-lg hover:bg-primary/90 transition-colors">
                            开始手动灌溉
                        </button>
                    </div>
                    
                    <div>
                        <h4 class="font-medium mb-2">灌溉记录</h4>
                        <div class="space-y-2 max-h-40 overflow-y-auto scrollbar-hide pr-2">
                            <div class="flex items-center justify-between p-2 bg-gray-50 rounded-lg">
                                <div>
                                    <div class="text-sm font-medium">小麦田</div>
                                    <div class="text-xs text-gray-500">2025-06-29 15:00</div>
                                </div>
                                <div class="text-sm font-medium">20.0 mm</div>
                            </div>
                            <div class="flex items-center justify-between p-2 bg-gray-50 rounded-lg">
                                <div>
                                    <div class="text-sm font-medium">玉米田</div>
                                    <div class="text-xs text-gray-500">2025-06-28 16:30</div>
                                </div>
                                <div class="text-sm font-medium">25.0 mm</div>
                            </div>
                            <div class="flex items-center justify-between p-2 bg-gray-50 rounded-lg">
                                <div>
                                    <div class="text-sm font-medium">水稻田</div>
                                    <div class="text-xs text-gray-500">2025-06-28 10:00</div>
                                </div>
                                <div class="text-sm font-medium">30.0 mm</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 预测分析区域 -->
        <section id="prediction" class="mb-8">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-xl font-bold">预测分析</h2>
                <div class="flex space-x-2">
                    <button id="refresh-prediction" class="bg-primary text-white px-4 py-2 rounded-lg flex items-center transition-all hover:bg-primary/90">
                        <i class="fa fa-refresh mr-2"></i>刷新预测
                    </button>
                    <div class="relative">
                        <select id="prediction-days" class="appearance-none bg-white border border-gray-200 rounded-lg pl-4 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-primary/20">
                            <option value="7">未来7天</option>
                            <option value="14">未来14天</option>
                            <option value="30">未来30天</option>
                        </select>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500">
                            <i class="fa fa-chevron-down text-xs"></i>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div class="bg-white rounded-xl p-6 shadow-card">
                    <h3 class="text-lg font-bold mb-4">天气预测</h3>
                    <div class="space-y-4">
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                            <div>
                                <div class="text-sm font-medium">今天</div>
                                <div class="text-xs text-gray-500">6月30日</div>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-sun-o text-yellow-500 text-xl mr-2"></i>
                                <span class="font-medium">28°C</span>
                            </div>
                        </div>
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                            <div>
                                <div class="text-sm font-medium">明天</div>
                                <div class="text-xs text-gray-500">7月1日</div>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-sun-o text-yellow-500 text-xl mr-2"></i>
                                <span class="font-medium">30°C</span>
                            </div>
                        </div>
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                            <div>
                                <div class="text-sm font-medium">后天</div>
                                <div class="text-xs text-gray-500">7月2日</div>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-cloud text-gray-400 text-xl mr-2"></i>
                                <span class="font-medium">27°C</span>
                            </div>
                        </div>
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                            <div>
                                <div class="text-sm font-medium">周四</div>
                                <div class="text-xs text-gray-500">7月3日</div>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-tint text-blue-500 text-xl mr-2"></i>
                                <span class="font-medium">24°C</span>
                            </div>
                        </div>
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                            <div>
                                <div class="text-sm font-medium">周五</div>
                                <div class="text-xs text-gray-500">7月4日</div>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-cloud text-gray-400 text-xl mr-2"></i>
                                <span class="font-medium">25°C</span>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4 text-center">
                        <button class="text-primary text-sm hover:underline">查看完整天气预报</button>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl p-6 shadow-card lg:col-span-2">
                    <h3 class="text-lg font-bold mb-4">土壤湿度预测</h3>
                    <div class="relative h-80">
                        <canvas id="soil-moisture-prediction-chart"></canvas>
                    </div>
                    <div class="mt-4 flex justify-between items-center">
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full bg-primary mr-2"></div>
                            <span class="text-sm">预测湿度</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full bg-success mr-2"></div>
                            <span class="text-sm">适宜范围</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full bg-warning mr-2"></div>
                            <span class="text-sm">灌溉建议</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl p-6 shadow-card mt-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-bold">灌溉计划建议</h3>
                    <span class="text-sm text-gray-500">基于天气和土壤湿度预测</span>
                </div>
                
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead>
                            <tr>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">预测湿度</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">天气状况</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">灌溉建议</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">灌溉量</th>
                                <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2025-07-01</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">55.2%</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">晴朗</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-warning/10 text-warning">
                                        建议灌溉
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15.0 mm</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-primary hover:text-primary/80">
                                    <button>安排</button>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2025-07-03</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">42.8%</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">小雨</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-success/10 text-success">
                                        无需灌溉
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-primary hover:text-primary/80">
                                    <button>详情</button>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">2025-07-05</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">38.5%</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">晴朗</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-danger/10 text-danger">
                                        急需灌溉
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">25.0 mm</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-primary hover:text-primary/80">
                                    <button>安排</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
        
        <!-- 历史记录区域 -->
        <section id="history" class="mb-8">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-xl font-bold">历史记录</h2>
                <div class="flex space-x-2">
                    <div class="relative">
                        <select id="history-farmland" class="appearance-none bg-white border border-gray-200 rounded-lg pl-4 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-primary/20">
                            <option value="all">所有农田</option>
                            <option value="1">小麦田</option>
                            <option value="2">水稻田</option>
                            <option value="3">玉米田</option>
                        </select>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500">
                            <i class="fa fa-chevron-down text-xs"></i>
                        </div>
                    </div>
                    <div class="relative">
                        <select id="history-time-range" class="appearance-none bg-white border border-gray-200 rounded-lg pl-4 pr-10 py-2 focus:outline-none focus:ring-2 focus:ring-primary/20">
                            <option value="7">最近7天</option>
                            <option value="30">最近30天</option>
                            <option value="90">最近90天</option>
                            <option value="all">全部</option>
                        </select>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500">
                            <i class="fa fa-chevron-down text-xs"></i>
                        </div>
                    </div>
                    <button id="export-history" class="bg-primary text-white px-4 py-2 rounded-lg flex items-center transition-all hover:bg-primary/90">
                        <i class="fa fa-download mr-2"></i>导出
                    </button>
                </div>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div class="bg-white rounded-xl p-6 shadow-card">
                    <h3 class="text-lg font-bold mb-4">灌溉统计</h3>
                    <div class="space-y-4">
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="text-sm text-gray-600">总灌溉次数</span>
                                <span class="text-sm font-medium">28次</span>
                            </div>
                            <div class="relative h-2 bg-gray-100 rounded-full overflow-hidden">
                                <div class="absolute left-0 top-0 h-full bg-primary rounded-full" style="width: 75%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="text-sm text-gray-600">总用水量</span>
                                <span class="text-sm font-medium">560 mm</span>
                            </div>
                            <div class="relative h-2 bg-gray-100 rounded-full overflow-hidden">
                                <div class="absolute left-0 top-0 h-full bg-blue-500 rounded-full" style="width: 65%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="text-sm text-gray-600">智能灌溉占比</span>
                                <span class="text-sm font-medium">85%</span>
                            </div>
                            <div class="relative h-2 bg-gray-100 rounded-full overflow-hidden">
                                <div class="absolute left-0 top-0 h-full bg-green-500 rounded-full" style="width: 85%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="text-sm text-gray-600">节省水量</span>
                                <span class="text-sm font-medium">120 mm</span>
                            </div>
                            <div class="relative h-2 bg-gray-100 rounded-full overflow-hidden">
                                <div class="absolute left-0 top-0 h-full bg-purple-500 rounded-full" style="width: 40%"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-6 pt-4 border-t border-gray-100">
                        <div class="grid grid-cols-2 gap-4">
                            <div class="bg-gray-50 rounded-lg p-3 text-center">
                                <div class="text-2xl font-bold text-primary">20%</div>
                                <div class="text-xs text-gray-500">用水减少</div>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-3 text-center">
                                <div class="text-2xl font-bold text-success">15%</div>
                                <div class="text-xs text-gray-500">产量增加</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl p-6 shadow-card lg:col-span-2">
                    <h3 class="text-lg font-bold mb-4">灌溉历史记录</h3>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead>
                                <tr>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">农田</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">灌溉量</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">灌溉方式</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">模式</th>
                                    <th class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2025-06-29 15:00</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">小麦田</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">20.0 mm</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">喷灌</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-primary/10 text-primary">
                                            智能
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-success/10 text-success">
                                            完成
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2025-06-28 16:30</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">玉米田</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">25.0 mm</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">滴灌</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-primary/10 text-primary">
                                            智能
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-success/10 text-success">
                                            完成
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2025-06-28 10:00</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">水稻田</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30.0 mm</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">喷灌</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                            手动
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-success/10 text-success">
                                            完成
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2025-06-27 14:45</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">小麦田</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15.0 mm</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">滴灌</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-primary/10 text-primary">
                                            智能
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-success/10 text-success">
                                            完成
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2025-06-26 16:00</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">玉米田</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">20.0 mm</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">喷灌</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-primary/10 text-primary">
                                            智能
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-success/10 text-success">
                                            完成
                                        </span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="mt-4 flex justify-between items-center">
                        <div class="text-sm text-gray-500">显示 1-5 条，共 28 条</div>
                        <div class="flex space-x-1">
                            <button class="w-8 h-8 flex items-center justify-center rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                                <i class="fa fa-chevron-left text-xs"></i>
                            </button>
                            <button class="w-8 h-8 flex items-center justify-center rounded-lg bg-primary text-white">1</button>
                            <button class="w-8 h-8 flex items-center justify-center rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50">2</button>
                            <button class="w-8 h-8 flex items-center justify-center rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50">3</button>
                            <button class="w-8 h-8 flex items-center justify-center rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50">
                                <i class="fa fa-chevron-right text-xs"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-6">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center mb-4 md:mb-0">
                    <i class="fa fa-leaf text-primary text-xl mr-2"></i>
                    <span class="font-bold text-gray-800">智慧农业灌溉系统</span>
                </div>
                
                <div class="flex space-x-6 mb-4 md:mb-0">
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-question-circle mr-1"></i> 帮助中心
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-book mr-1"></i> 使用文档
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-envelope mr-1"></i> 联系我们
                    </a>
                </div>
                
                <div class="text-sm text-gray-500">
                    © 2025 智慧农业灌溉系统. 保留所有权利.
                </div>
            </div>
        </div>
    </footer>

    <!-- 灌溉状态模态框 -->
    <div id="irrigation-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
        <div class="absolute inset-0 bg-black bg-opacity-50 transition-opacity"></div>
        <div class="relative bg-white rounded-xl p-6 max-w-md w-full mx-4 transform transition-all">
            <div class="text-center">
                <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
                    <i class="fa fa-tint text-primary text-2xl"></i>
                </div>
                <h3 class="text-lg font-bold mb-2">灌溉状态</h3>
                <p class="text-gray-600 mb-4">正在灌溉小麦田，已灌溉 <span id="irrigation-progress-value">0</span> mm</p>
                
                <div class="relative h-2 bg-gray-100 rounded-full overflow-hidden mb-6">
                    <div id="irrigation-progress-bar" class="absolute left-0 top-0 h-full bg-primary rounded-full" style="width: 0%"></div>
                </div>
                
                <div class="grid grid-cols-2 gap-3">
                    <button id="cancel-irrigation" class="bg-gray-200 text-gray-700 py-2 rounded-lg hover:bg-gray-300 transition-colors">
                        取消灌溉
                    </button>
                    <button id="close-irrigation-modal" class="bg-primary text-white py-2 rounded-lg hover:bg-primary/90 transition-colors">
                        关闭
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 设置当前日期
        const setCurrentDate = () => {
            const now = new Date();
            const options = { year: 'numeric', month: 'long', day: 'numeric' };
            document.getElementById('current-date').textContent = now.toLocaleDateString('zh-CN', options);
            
            const days = ['日', '一', '二', '三', '四', '五', '六'];
            document.getElementById('current-day').textContent = days[now.getDay()];
        };
        
        // 初始化土壤湿度预测图表
        const initSoilMoisturePredictionChart = () => {
            const ctx = document.getElementById('soil-moisture-prediction-chart').getContext('2d');
            
            const labels = ['今天', '明天', '后天', '7月3日', '7月4日', '7月5日', '7月6日'];
            const moistureData = [60.2, 55.2, 51.8, 42.8, 45.5, 38.5, 40.0];
            const optimalRange = [40, 70];
            
            const chart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: '预测湿度',
                            data: moistureData,
                            borderColor: '#165DFF',
                            backgroundColor: 'rgba(22, 93, 255, 0.1)',
                            tension: 0.4,
                            fill: true
                        },
                        {
                            label: '适宜范围',
                            data: [optimalRange[1], optimalRange[1], optimalRange[1], optimalRange[1], optimalRange[1], optimalRange[1], optimalRange[1]],
                            borderColor: '#00B42A',
                            borderDash: [5, 5],
                            pointRadius: 0,
                            fill: false,
                            tension: 0
                        },
                        {
                            label: '适宜范围',
                            data: [optimalRange[0], optimalRange[0], optimalRange[0], optimalRange[0], optimalRange[0], optimalRange[0], optimalRange[0]],
                            borderColor: '#00B42A',
                            borderDash: [5, 5],
                            pointRadius: 0,
                            fill: false,
                            tension: 0
                        },
                        {
                            label: '灌溉建议',
                            data: [null, 55.2, null, null, null, 38.5, null],
                            borderColor: '#FF7D00',
                            backgroundColor: 'rgba(255, 125, 0, 0.2)',
                            borderWidth: 2,
                            pointRadius: 6,
                            pointBackgroundColor: '#FF7D00',
                            pointHoverRadius: 8,
                            showLine: false
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                            callbacks: {
                                label: function(context) {
                                    let label = context.dataset.label || '';
                                    if (label) {
                                        label += ': ';
                                    }
                                    if (context.datasetIndex === 0 || context.datasetIndex === 3) {
                                        label += context.parsed.y + '%';
                                    }
                                    return label;
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: false,
                            min: 0,
                            max: 100,
                            ticks: {
                                callback: function(value) {
                                    return value + '%';
                                }
                            },
                            grid: {
                                drawBorder: false
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    },
                    interaction: {
                        mode: 'index',
                        intersect: false
                    }
                }
            });
        };
        
        // 灌溉控制
        const setupIrrigationControls = () => {
            const startIrrigationBtn = document.getElementById('start-irrigation');
            const stopIrrigationBtn = document.getElementById('stop-irrigation');
            const irrigationStatus = document.getElementById('irrigation-status');
            const waterDrops = document.getElementById('water-drops');
            const irrigationModal = document.getElementById('irrigation-modal');
            const irrigationProgressBar = document.getElementById('irrigation-progress-bar');
            const irrigationProgressValue = document.getElementById('irrigation-progress-value');
            const closeIrrigationModal = document.getElementById('close-irrigation-modal');
            const cancelIrrigation = document.getElementById('cancel-irrigation');
            const manualIrrigationBtn = document.getElementById('manual-irrigation-btn');
            const irrigationAmountSlider = document.getElementById('irrigation-amount');
            const irrigationAmountValue = document.getElementById('irrigation-amount-value');
            
            let isIrrigating = false;
            let irrigationProgress = 0;
            let irrigationInterval;
            
            // 开始灌溉
            const startIrrigation = () => {
                isIrrigating = true;
                startIrrigationBtn.classList.add('hidden');
                stopIrrigationBtn.classList.remove('hidden');
                irrigationStatus.textContent = '正在灌溉';
                irrigationStatus.className = 'px-2 py-1 text-xs rounded-full bg-warning/10 text-warning';
                waterDrops.classList.remove('opacity-0');
                
                // 显示灌溉进度模态框
                irrigationModal.classList.remove('hidden');
                irrigationProgress = 0;
                irrigationProgressBar.style.width = '0%';
                irrigationProgressValue.textContent = '0';
                
                // 模拟灌溉进度
                clearInterval(irrigationInterval);
                irrigationInterval = setInterval(() => {
                    irrigationProgress += 1;
                    irrigationProgressBar.style.width = `${irrigationProgress}%`;
                    irrigationProgressValue.textContent = (irrigationProgress / 5).toFixed(1);
                    
                    if (irrigationProgress >= 100) {
                        clearInterval(irrigationInterval);
                        stopIrrigation();
                    }
                }, 100);
            };
            
            // 停止灌溉
            const stopIrrigation = () => {
                isIrrigating = false;
                startIrrigationBtn.classList.remove('hidden');
                stopIrrigationBtn.classList.add('hidden');
                irrigationStatus.textContent = '未灌溉';
                irrigationStatus.className = 'px-2 py-1 text-xs rounded-full bg-success/10 text-success';
                waterDrops.classList.add('opacity-0');
                
                // 关闭模态框
                irrigationModal.classList.add('hidden');
                clearInterval(irrigationInterval);
            };
            
            // 事件监听
            startIrrigationBtn.addEventListener('click', startIrrigation);
            stopIrrigationBtn.addEventListener('click', stopIrrigation);
            closeIrrigationModal.addEventListener('click', () => {
                if (!isIrrigating) {
                    irrigationModal.classList.add('hidden');
                }
            });
            cancelIrrigation.addEventListener('click', stopIrrigation);
            
            // 手动灌溉
            manualIrrigationBtn.addEventListener('click', () => {
                // 获取选择的农田和灌溉量
                const farmlandId = document.getElementById('manual-farmland').value;
                const farmlandName = document.getElementById('manual-farmland').options[document.getElementById('manual-farmland').selectedIndex].text;
                const amount = irrigationAmountSlider.value;
                
                // 显示灌溉模态框
                irrigationModal.classList.remove('hidden');
                irrigationProgress = 0;
                irrigationProgressBar.style.width = '0%';
                irrigationProgressValue.textContent = '0';
                
                // 模拟灌溉
                isIrrigating = true;
                isIrrigating = true;
                startIrrigationBtn.classList.add('hidden');
                stopIrrigationBtn.classList.remove('hidden');
                irrigationStatus.textContent = `正在灌溉${farmlandName}`;
                irrigationStatus.className = 'px-2 py-1 text-xs rounded-full bg-warning/10 text-warning';
                waterDrops.classList.remove('opacity-0');
                
                clearInterval(irrigationInterval);
                irrigationInterval = setInterval(() => {
                    irrigationProgress += 1;
                    irrigationProgressBar.style.width = `${irrigationProgress}%`;
                    irrigationProgressValue.textContent = (amount * irrigationProgress / 100).toFixed(1);
                    
                    if (irrigationProgress >= 100) {
                        clearInterval(irrigationInterval);
                        stopIrrigation();
                        
                        // 添加到灌溉记录
                        const historyContainer = document.querySelector('#history .scrollbar-hide');
                        const now = new Date();
                        const timeString = now.toISOString().slice(0, 16).replace('T', ' ');
                        
                        const newRecord = document.createElement('div');
                        newRecord.className = 'flex items-center justify-between p-2 bg-gray-50 rounded-lg';
                        newRecord.innerHTML = `
                            <div>
                                <div class="text-sm font-medium">${farmlandName}</div>
                                <div class="text-xs text-gray-500">${timeString}</div>
                            </div>
                            <div class="text-sm font-medium">${amount}.0 mm</div>
                        `;
                        
                        historyContainer.insertBefore(newRecord, historyContainer.firstChild);
                    }
                }, 50);
            });
            
            // 更新灌溉量显示
            irrigationAmountSlider.addEventListener('input', () => {
                irrigationAmountValue.textContent = irrigationAmountSlider.value;
            });
        };
        
        // 导航菜单切换
        const setupNavigation = () => {
            const mobileMenuButton = document.getElementById('mobile-menu-button');
            const mobileMenu = document.getElementById('mobile-menu');
            const userMenuButton = document.getElementById('user-menu-button');
            const userDropdown = document.getElementById('user-dropdown');
            
            mobileMenuButton.addEventListener('click', () => {
                mobileMenu.classList.toggle('hidden');
            });
            
            userMenuButton.addEventListener('click', () => {
                userDropdown.classList.toggle('hidden');
            });
            
            // 点击其他区域关闭下拉菜单
            document.addEventListener('click', (e) => {
                if (!userMenuButton.contains(e.target)) {
                    userDropdown.classList.add('hidden');
                }
                if (!mobileMenuButton.contains(e.target) && !mobileMenu.contains(e.target)) {
                    mobileMenu.classList.add('hidden');
                }
            });
            
            // 滚动时改变导航栏样式
            window.addEventListener('scroll', () => {
                const header = document.getElementById('main-header');
                if (window.scrollY > 10) {
                    header.classList.add('shadow-md');
                    header.classList.remove('shadow-sm');
                } else {
                    header.classList.remove('shadow-md');
                    header.classList.add('shadow-sm');
                }
            });
        };
        
        // 农田选择器
        const setupFarmlandSelector = () => {
            const farmlandSelector = document.getElementById('farmland-selector');
            const soilMoistureDisplay = document.getElementById('soil-moisture-display');
            const soilMoistureBar = document.getElementById('soil-moisture-bar');
            const soilMoistureStatus = document.getElementById('soil-moisture-status');
            const soilTempDisplay = document.getElementById('soil-temp-display');
            const soilTempStatus = document.getElementById('soil-temp-status');
            const waterTempDisplay = document.getElementById('water-temp-display');
            const waterTempStatus = document.getElementById('water-temp-status');
            const moistureMin = document.getElementById('moisture-min');
            const moistureMax = document.getElementById('moisture-max');
            const phValue = document.getElementById('ph-value');
            const nitrogenValue = document.getElementById('nitrogen-value');
            const phosphorusValue = document.getElementById('phosphorus-value');
            const potassiumValue = document.getElementById('potassium-value');
            const fertilityReport = document.getElementById('fertility-report');
            const crops = document.getElementById('crops');
            
            const farmlandData = {
                1: { // 小麦田
                    moisture: 60.2,
                    moistureRange: [40, 70],
                    soilTemp: 25.5,
                    waterTemp: 22.3,
                    ph: 6.8,
                    nitrogen: 18.5,
                    phosphorus: 12.3,
                    potassium: 20.1,
                    fertilityReport: "土壤酸碱度呈弱酸性，适合大多数作物生长。氮含量充足，磷含量中等，钾含量较高。有机质含量适中，建议根据作物生长阶段适量补充磷肥。",
                    cropSvg: `<path d="M70,150 Q90,120 110,150" fill="none" stroke="#DAA520" stroke-width="2" />
                              <path d="M100,150 Q120,120 140,150" fill="none" stroke="#DAA520" stroke-width="2" />
                              <path d="M130,150 Q150,120 170,150" fill="none" stroke="#DAA520" stroke-width="2" />
                              <path d="M160,150 Q180,120 200,150" fill="none" stroke="#DAA520" stroke-width="2" />
                              <path d="M190,150 Q210,120 230,150" fill="none" stroke="#DAA520" stroke-width="2" />`
                },
                2: { // 水稻田
                    moisture: 85.3,
                    moistureRange: [70, 90],
                    soilTemp: 26.8,
                    waterTemp: 24.5,
                    ph: 6.5,
                    nitrogen: 20.3,
                    phosphorus: 15.2,
                    potassium: 18.7,
                    fertilityReport: "土壤酸碱度呈弱酸性，适合水稻生长。氮、磷、钾含量均处于良好水平。有机质含量较高，保持当前施肥策略。",
                    cropSvg: `<path d="M70,150 Q90,130 110,150" fill="none" stroke="#228B22" stroke-width="2" />
                              <path d="M100,150 Q120,130 140,150" fill="none" stroke="#228B22" stroke-width="2" />
                              <path d="M130,150 Q150,130 170,150" fill="none" stroke="#228B22" stroke-width="2" />
                              <path d="M160,150 Q180,130 200,150" fill="none" stroke="#228B22" stroke-width="2" />
                              <path d="M190,150 Q210,130 230,150" fill="none" stroke="#228B22" stroke-width="2" />`
                },
                3: { // 玉米田
                    moisture: 55.7,
                    moistureRange: [45, 65],
                    soilTemp: 27.2,
                    waterTemp: 23.8,
                    ph: 7.0,
                    nitrogen: 16.2,
                    phosphorus: 10.5,
                    potassium: 22.4,
                    fertilityReport: "土壤呈中性，适合玉米生长。氮含量中等，磷含量偏低，钾含量充足。建议增加磷肥的使用，以促进根系发育。",
                    cropSvg: `<path d="M70,150 Q90,110 110,150" fill="none" stroke="#FFD700" stroke-width="2" />
                              <path d="M100,150 Q120,110 140,150" fill="none" stroke="#FFD700" stroke-width="2" />
                              <path d="M130,150 Q150,110 170,150" fill="none" stroke="#FFD700" stroke-width="2" />
                              <path d="M160,150 Q180,110 200,150" fill="none" stroke="#FFD700" stroke-width="2" />
                              <path d="M190,150 Q210,110 230,150" fill="none" stroke="#FFD700" stroke-width="2" />`
                }
            };
            
            const updateFarmlandData = (farmlandId) => {
                const data = farmlandData[farmlandId];
                
                // 更新土壤湿度
                soilMoistureDisplay.textContent = data.moisture.toFixed(1);
                soilMoistureBar.style.width = `${data.moisture}%`;
                moistureMin.textContent = data.moistureRange[0];
                moistureMax.textContent = data.moistureRange[1];
                
                // 更新状态标签
                if (data.moisture < data.moistureRange[0]) {
                    soilMoistureStatus.className = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-danger/10 text-danger";
                    soilMoistureStatus.innerHTML = '<i class="fa fa-exclamation-circle mr-1"></i>湿度过低';
                } else if (data.moisture > data.moistureRange[1]) {
                    soilMoistureStatus.className = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-danger/10 text-danger";
                    soilMoistureStatus.innerHTML = '<i class="fa fa-exclamation-circle mr-1"></i>湿度过高';
                } else {
                    soilMoistureStatus.className = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success/10 text-success";
                    soilMoistureStatus.innerHTML = '<i class="fa fa-check-circle mr-1"></i>湿度适宜';
                }
                
                // 更新土壤温度
                soilTempDisplay.textContent = data.soilTemp.toFixed(1);
                
                // 更新水温
                waterTempDisplay.textContent = data.waterTemp.toFixed(1);
                
                // 更新土壤肥力
                phValue.textContent = data.ph.toFixed(1);
                document.getElementById('ph-indicator').style.width = `${data.ph * 10}%`;
                
                nitrogenValue.textContent = data.nitrogen.toFixed(1);
                document.getElementById('nitrogen-indicator').style.width = `${data.nitrogen * 3.5}%`;
                
                phosphorusValue.textContent = data.phosphorus.toFixed(1);
                document.getElementById('phosphorus-indicator').style.width = `${data.phosphorus * 4}%`;
                
                potassiumValue.textContent = data.potassium.toFixed(1);
                document.getElementById('potassium-indicator').style.width = `${data.potassium * 3.5}%`;
                
                // 更新肥力报告
                fertilityReport.textContent = data.fertilityReport;
                
                // 更新作物显示
                crops.innerHTML = data.cropSvg;
                
                // 更新灌溉建议
                document.getElementById('irrigation-suggestion').textContent = 
                    `基于当前土壤湿度${data.moisture}%和天气预报，${
                        data.moisture < data.moistureRange[0] ? '建议立即灌溉' : 
                        data.moisture > data.moistureRange[1] ? '无需灌溉' : 
                        '建议在今天下午4点进行灌溉'
                    }，预计灌溉量${data.moisture < data.moistureRange[0] ? '25.0' : '20.0'}毫米。`;
                
                document.getElementById('expected-irrigation-amount').textContent = 
                    data.moisture < data.moistureRange[0] ? '25.0 mm' : '20.0 mm';
            };
            
            farmlandSelector.addEventListener('change', (e) => {
                updateFarmlandData(e.target.value);
            });
            
            // 初始化
            updateFarmlandData(farmlandSelector.value);
        };
        
        // 初始化页面
                // 初始化页面
        document.addEventListener('DOMContentLoaded', () => {
            setCurrentDate();
            initSoilMoisturePredictionChart();
            setupIrrigationControls();
            setupNavigation();
            setupFarmlandSelector();
            
            // 为刷新按钮添加点击事件
            document.getElementById('refresh-sensor-data').addEventListener('click', () => {
                // 模拟刷新传感器数据
                const waterLevel = (Math.random() * 20 + 75).toFixed(1);
                const soilMoisture = (Math.random() * 10 + 55).toFixed(1);
                const soilTemp = (Math.random() * 4 + 23).toFixed(1);
                
                document.getElementById('water-level').textContent = waterLevel;
                document.getElementById('water-level-display').textContent = waterLevel;
                document.getElementById('water-level-bar').style.width = `${waterLevel}%`;
                
                document.getElementById('soil-moisture').textContent = soilMoisture;
                document.getElementById('soil-moisture-display').textContent = soilMoisture;
                document.getElementById('soil-moisture-bar').style.width = `${soilMoisture}%`;
                
                document.getElementById('soil-temp').textContent = soilTemp;
                document.getElementById('soil-temp-display').textContent = soilTemp;
                
                // 更新状态标签
                const moistureRange = [40, 70];
                if (parseFloat(soilMoisture) < moistureRange[0]) {
                    document.getElementById('soil-moisture-status').innerHTML = '<i class="fa fa-exclamation-circle mr-1"></i>湿度过低';
                    document.getElementById('soil-moisture-status').className = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-danger/10 text-danger";
                } else if (parseFloat(soilMoisture) > moistureRange[1]) {
                    document.getElementById('soil-moisture-status').innerHTML = '<i class="fa fa-exclamation-circle mr-1"></i>湿度过高';
                    document.getElementById('soil-moisture-status').className = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-danger/10 text-danger";
                } else {
                    document.getElementById('soil-moisture-status').innerHTML = '<i class="fa fa-check-circle mr-1"></i>湿度适宜';
                    document.getElementById('soil-moisture-status').className = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success/10 text-success";
                }
                
                // 添加动画效果
                const cards = document.querySelectorAll('.shadow-card');
                cards.forEach(card => {
                    card.classList.add('animate-pulse');
                    setTimeout(() => {
                        card.classList.remove('animate-pulse');
                    }, 1000);
                });
            });
            
            // 为预测刷新按钮添加点击事件
            document.getElementById('refresh-prediction').addEventListener('click', () => {
                // 模拟刷新预测数据
                const predictionChart = Chart.getChart('soil-moisture-prediction-chart');
                if (predictionChart) {
                    // 随机生成一些预测数据
                    const newData = [60.2];
                    for (let i = 1; i < 7; i++) {
                        newData.push(Math.random() * 30 + 30);
                    }
                    
                    predictionChart.data.datasets[0].data = newData;
                    predictionChart.update();
                    
                    // 添加动画效果
                    const chartContainer = document.getElementById('soil-moisture-prediction-chart').parentElement;
                    chartContainer.classList.add('animate-pulse');
                    setTimeout(() => {
                        chartContainer.classList.remove('animate-pulse');
                    }, 1000);
                }
            });
            
            // 平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    
                    const targetId = this.getAttribute('href');
                    if (targetId === '#') return;
                    
                    const targetElement = document.querySelector(targetId);
                    if (targetElement) {
                        window.scrollTo({
                            top: targetElement.offsetTop - 80, // 减去导航栏高度
                            behavior: 'smooth'
                        });
                        
                        // 移动端菜单自动关闭
                        document.getElementById('mobile-menu').classList.add('hidden');
                    }
                });
            });
        });
    </script>
</body>
</html>